<template>
	<div id="app">
		<div class="login_container">
			<div class="login_box">
				<div class="img_box">
					<img src="../assets/logo.png" />
				</div>
			<el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" class="loginForm">
				<el-form-item prop="username">
					<el-input v-model="loginForm.username"prefix-icon="el-icon-user-solid"></el-input>
				</el-form-item>
				<el-form-item prop="userpwd">
					<el-input v-model="loginForm.userpwd"
						prefix-icon="el-icon-lock" show-password ></el-input>
				</el-form-item>
				<el-form-item class="butns">
					<el-button type="primary" @click="login" >登录</el-button>
					<el-button type="info">重置</el-button>
				</el-form-item>
			</el-form>
			</div>
		</div>
	</div>
</template>

<script>
export default {
data() {
	return {
		loginForm: {
			username: 'zhangsan',
			userpwd: '123456'
		},
		loginFormRules: {
			username:[
				{ required: true, message: '请输入登录名称', trigger: 'blur' },
				{ min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
			],
			userpwd: [
				{ required: true, message: '请输入登录密码', trigger: 'blur' },
				{ min: 6, max: 10, message: '密码长度要在6到10之间', trigger: 'blur' }
			]
		}
	}
},
methods: {
	login() {
		// 预验证  如果表单验证通过，则允许发送登录请求。如果验证不通过直接截止代码运行
		this.$refs.loginForm.validate( async valid =>{
			//如果表单验证通过，valid的值会被传递为true,否则为false
			if(!valid)  return this.$message.error('请输入合法的账户名密码');
			let {data: res} = await this.$http.post('/manager/login',this.loginForm)
			console.log(res)
			if(res.meta.status !== 200) return this.$message.error(res.meta.msg);
			this.$message.success(res.meta.msg)
			//把token存到sessionStorage里边
			window.sessionStorage.setItem('token',res.data.token)
			//登陆成功，跳转到主页
			this.$router.push('/home')
		})
		}
	}
}
</script>

<style lang="scss">
.login_container{
  height: 100%;
  background-color: #2b4b6b;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  .img_box{
     height: 130px;
     width: 130px;
     border: 1px solid #eee;
     border-radius: 50%;
     padding: 10px;
     box-shadow: 0 0 10px #ddd;
     position: absolute;
     left: 50%;
     transform: translate(-50%,-50%);
     background-color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     img {
       width: 100%;
       height: 100%;
       border-radius: 50%;
       background-color: #ddd;
     }
   }
   .loginForm {
      position: absolute;
      bottom: 0px;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      .butns{
        display: flex;
        justify-content: center;
      }
   }

}


</style>
